@import (reference) 'config';
@import (reference) '../../app/less/app';

body.restore {
  .restore-content {
    .seed-block {
      border-radius: @border-radius;
      border: 1px solid @color-basic-200;

      w-input textarea {
        border-radius: @border-radius;
        border: none;
        padding: 16px;
        min-height: 86px;
        max-height: 150px;
        resize: vertical;
      }

      .address {
        &-block {
          width: calc(100% ~'- 45px');

          .address {
            overflow: hidden;
            text-overflow: ellipsis;

            &.empty {
              position: relative;
              top: 3px;
              height: 8px;
              border-radius: 100px;
              background-color: @color-basic-100;
            }
          }

          &-avatar { // .address-block-avatar
            margin-right: 10px;
            width: 36px;
            height: 36px;

            .avatar-wrap {
              width: 100% !important;
              height: 100% !important;
            }

            .avatar-img {
              width: 100%;
              height: 100%;
           }
          }
        }

        &-block-info {
          background-color: @color-basic-50;
          border-top: 1px solid @color-basic-200;
          height: 76px;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0 14px;
        }
      }

      .avatar-fake {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        background-color: @color-basic-100;
        flex-shrink: 0;
        margin-right: 10px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  body.restore {
    .restore-content {
      .seed-block {
        w-input textarea {
          padding: @padding-control-big-responsive-horizontal;
        }

        .avatar-fake {
          width: 32px;
          height: 32px;
        }

        .address-block {
          .address {
            &.empty {
              height: 6px;
            }
          }

          &-avatar {
            width: 32px;
            height: 32px;
          }
        }

        .address-block-info {
          height: 67px;
        }
      }
    }
  }
}